import React, { useState,useEffect,useContext,useRef } from 'react';
import { PrimaryButton } from 'office-ui-fabric-react';
// import HookCounterContext from './context'
import {ColorContext} from './colorContext';
// import HookButtons from '../HookButtons';
import HookHotWinResize from '../../custHook/HookHotWinResize';

export default function HookCounter(){
    
    const windowSize = HookHotWinResize();
    const {color} = useContext(ColorContext);

    let props = useContext(ColorContext);
    let _name = props.name;
    if(!_name){
        _name = '无名氏';
    }
    console.log('context: ',useContext(ColorContext));

    const [count,setCount] = useState(0); // 其中的 0  是count的默认值
    const [name,setName] = useState(_name);
    const [age, setAge] = useState(props.age);
    const [content, setContent] = useState(props.content);
    const [inputContent, setInputContent] = useState('');

    const inputEl = useRef(null);

    const handleClick = ()=>{
        setCount(count+1);
        setName(`microler_${count}`);
        setAge(age+2);
        setContent(`${content}_${count}`);

        // setInputContent(inputEl.current.value);
        alert(`输入的内容：${inputEl.current.value}`);
    }

    const handleInputChange = (e) => {
        console.log(e.target.value);
        setInputContent(e.target.value);
    }

    useEffect(()=>{
        console.log('hooks component （对整个组件有效） >>>> 组件插入或更新');
        return ()=>{
            console.log('hooks component（对整个组件有效） >>>> 组件销毁');
        }
    },[])

    useEffect(()=>{
        console.log('hooks component（对count变量有效） >>>> 组件插入或更新');
        return ()=>{
            console.log('hooks component（对count变量有效） >>>> 组件销毁');
        }
    },[count])

    return (
        <div>
            <span style={{color:color}}>hooks component >>> count = {count}, name = {name}, age={age}, content={content}</span>
            <div>
                <div>输入的内容：{inputContent}</div>
                <input ref={inputEl} placeholder='please input content' type='text' onChange={handleInputChange}/>
            </div>
            <div>
                窗口尺寸：width = {windowSize.width},height = {windowSize.height}
            </div>
            <PrimaryButton text='click me' onClick={handleClick}/> <br/><br/>
            {/* <HookButtons /> <br/><br/> */}
        </div>
    );
}
